<!-- 产品消费记录列表 -->
<template>
  <s-layout title="客户剩余产品记录" :bgStyle="{ color: '#FFF' }">

    <!-- 产品消费记录列表 -->
    <view class="customer-list">
      <su-sticky bgColor="#fff">
        <su-tabs
          :list="tabMaps"
          :scrollable="true"
          @change="onClickItem"
          :current="state.currentTab"
        />
      </su-sticky>
      <view v-for="(customer, index) in state.pagination.list" :key="customer.id" class="customer-item">
        <!-- 基本信息 -->
        <view class="record-info">
          <!-- 产品名称 -->
          <view class="record-header">
            <view class="product-name">{{ customer.productName || '未知产品' }}</view>
            <view class="change-type" :class="customer.changeType ? 'type-deduct' : 'type-add'">
              {{ customer.changeType ? '扣除' : '添加' }}
            </view>
          </view>

          <!-- 详细信息 -->
          <view class="record-details">
            <view class="detail-row">
              <view class="detail-label">变更次数：</view>
              <view class="detail-value">{{ customer.changeCount || 0 }}</view>
            </view>
            <view class="detail-row">
              <view class="detail-label">剩余次数：</view>
              <view class="detail-value remaining-count">{{ customer.remainingCount || 0 }}</view>
            </view>
            <view class="detail-row" v-if="customer.cellSpecification">
              <view class="detail-label">产品规格：</view>
              <view class="detail-value remaining-count">{{ customer.cellSpecification || 0 }}</view>
            </view>
            <view class="detail-row">
              <view class="detail-label">创建时间：</view>
              <view class="detail-value">{{ formatTime(customer.createTime) }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!state.loading && state.pagination.list.length === 0">
      <uni-icons type="person-add" size="60" color="#ccc" />
      <text class="empty-text">暂无信息</text>
    </view>

    <!-- 加载状态 -->
    <uni-load-more v-if="state.pagination.list.length > 0" :status="state.loadStatus" :content-text="loadText"
                   @clickLoadMore="loadData" />
  </s-layout>
</template>

<script setup>
  import {
    onLoad,
    onShow,
    onPullDownRefresh,
    onReachBottom
  } from '@dcloudio/uni-app';
  import {
    reactive,
    computed,ref
  } from 'vue';
  import CustomerApi from '@/sheep/api/customer/customer';
  import {
    resetPagination
  } from '@/sheep/helper/utils';

  const state = reactive({
    customerProfileId:0,
    loading: false,
    loadStatus: '',
    pagination: {
      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
    },
    currentTab:0
  });
  const tabMaps = [
    { name: '全部', value: null },
    { name: '干细胞', value: 'STEM_CELL' },
    { name: '免疫细胞', value: 'IMMUNE_CELL' },
    { name: '外泌体细胞', value: 'EXOSOME_CELL' },
    { name: '全身体检', value: 'FULL_BODY_CHECK' },
    { name: '其他', value: 'OTHERS' },
  ];
  // 加载状态文本
  const loadText = computed(() => {
    return {
      contentdown: '上拉显示更多',
      contentrefresh: '正在加载...',
      contentnomore: '没有更多数据了'
    };
  });

  // 格式化时间
  function formatTime(time) {
    if (!time) return '未知时间';

    const date = new Date(time);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}`;
  }

  const onClickItem = (e) => {
    console.log(e)
    if (state.currentTab === e.index) return;
    state.currentTab = e.index;
    state.pagination.pageNo = 1;
    getCustomerList();
  };


  // 产品消费记录列表
  async function getCustomerList() {
    if (state.loadStatus === 'loading') return;

    state.loadStatus = 'loading';
    state.loading = state.pagination.pageNo === 1;

    try {
      let {
        code,
        data
      } = await CustomerApi.getCustomerRecordPage({
        pageNo: state.pagination.pageNo,
        pageSize: state.pagination.pageSize,
        customerProfileId:state.customerProfileId,
        productType:tabMaps[state.currentTab].value
      });

      if (code !== 0) {
        throw new Error('获取产品消费记录列表失败');
      }

      if (state.pagination.pageNo === 1) {
        state.pagination.list = data.list;
      } else {
        state.pagination.list = state.pagination.list.concat(data.list);
      }

      state.pagination.total = data.total;
      state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';

    } catch (error) {
      console.error('获取产品消费记录列表失败:', error);
      state.loadStatus = 'noMore';

      if (state.pagination.pageNo === 1) {
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'error'
        });
      }
    } finally {
      state.loading = false;
    }
  }

  // 加载更多数据
  function loadData() {
    if (state.loadStatus === 'loading') return;

    state.pagination.pageNo++;
    getCustomerList();
  }

  // 页面加载
  onLoad((options) => {
    if (options.id) {
      state.customerProfileId = options.id;
    }
    if(options.type){
      state.currentTab = options.type
    }
    getCustomerList();
  });

  onShow(async () => {

  });

  // 下拉刷新
  onPullDownRefresh(() => {
    resetPagination(state.pagination);
    getCustomerList().then(() => {
      uni.stopPullDownRefresh();
    });
  });

  // 上拉加载更多
  onReachBottom(() => {
    if (state.loadStatus === 'more') {
      loadData();
    }
  });
</script>

<style lang="scss" scoped>
  .search-container {
    padding: 20rpx;
    background: #fff;
    border-bottom: 2rpx solid #f0f0f0;
  }

  .search-box {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    gap: 20rpx;
  }

  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }

  .clear-btn {
    padding: 10rpx;

    &:active {
      opacity: 0.6;
    }
  }

  .customer-list {
    padding: 20rpx;
  }

  .customer-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      opacity: 0.8;
    }
  }

  // 新增的产品消费记录样式
  .record-info {
    width: 100%;
  }

  .record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
  }

  .product-name {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    flex: 1;
  }

  .change-type {
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    color: #fff;
    font-weight: 500;

    &.type-add {
      background: #52c41a;
    }

    &.type-deduct {
      background: #ff4d4f;
    }
  }

  .record-details {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }

  .detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .detail-label {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }

  .detail-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;

    &.remaining-count {
      color: #1890ff;
      font-size: 32rpx;
    }
  }

  .customer-info {
    flex: 1;
  }

  .customer-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    gap: 20rpx;
  }

  .customer-name {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }

  .customer-gender {
    .gender-tag {
      font-size: 22rpx;
      padding: 6rpx 12rpx;
      border-radius: 20rpx;
      color: #fff;

      &.gender-male {
        background: #007aff;
      }

      &.gender-female {
        background: #ff3b30;
      }

      &.gender-unknown {
        background: #999;
      }
    }
  }

  .customer-details {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    margin-bottom: 20rpx;
  }

  .detail-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .detail-text {
    font-size: 26rpx;
    color: #666;
  }

  .customer-status {
    .status-text {
      font-size: 24rpx;
      color: #999;
      background: #f8f9fa;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      display: inline-block;
    }
  }

  .customer-actions {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-left: 20rpx;
  }

  .action-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    &.edit-btn {
      background: rgba(0, 122, 255, 0.1);

      &:active {
        background: rgba(0, 122, 255, 0.2);
      }
    }

    &.delete-btn {
      background: rgba(255, 59, 48, 0.1);

      &:active {
        background: rgba(255, 59, 48, 0.2);
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 40rpx;
    text-align: center;
  }

  .empty-text {
    font-size: 32rpx;
    color: #666;
    margin: 30rpx 0 16rpx 0;
  }

  .empty-desc {
    font-size: 26rpx;
    color: #999;
  }

  .add-customer-btn {
    position: fixed;
    right: 40rpx;
    bottom: 100rpx;
    width: 100rpx;
    height: 100rpx;
    background: #007aff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
    z-index: 999;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.9);
    }
  }

  /* 加载更多样式 */
  :deep(.uni-load-more) {
    padding: 30rpx 0;
  }

  /* 打开按钮样式 */
  .open-btn {
    margin: 30rpx;
    background-color: #007AFF;
    color: white;
    border-radius: 10rpx;
  }

  /* 蒙层样式 */
  .custom-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  /* 弹窗容器 */
  .custom-modal-container {
    width: 80%;
    max-width: 600rpx;
    animation: modal-show 0.3s;
  }

  /* 弹窗内容 */
  .custom-modal-content {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
  }

  /* 弹窗头部 */
  .modal-header {
    padding: 30rpx;
    text-align: center;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .modal-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  /* 弹窗主体 */
  .modal-body {
    padding: 40rpx 30rpx;
  }

  .modal-input {
    height: 80rpx;
    padding: 0 20rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 8rpx;
    font-size: 28rpx;
  }

  .input-placeholder {
    color: #999;
    font-size: 28rpx;
  }

  /* 弹窗底部按钮 */
  .modal-footer {
    display: flex;
    border-top: 1rpx solid #f5f5f5;
  }

  .footer-btn {
    flex: 1;
    text-align: center;
    padding: 25rpx 0;
    font-size: 30rpx;
  }

  .cancel-btn {
    color: #666;
    border-right: 1rpx solid #f5f5f5;
  }

  .confirm-btn {
    color: #007AFF;
    font-weight: bold;
  }

  /* 动画效果 */
  @keyframes modal-show {
    from {
      opacity: 0;
      transform: translateY(-50px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

